<template>
  <!-- <div> -->
  <div class="GaugeView" v-loading="loading" >
    <div id="Gauge"></div>
  </div>
  <!-- </div> -->
</template>

<script setup lang="ts">
import { getBadReviews, getWord } from "@/request/comment";
const echart = inject("echart");
let myChart = null;
const loading = ref(true)
const props = defineProps({
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: String,
    default: "300px"
  },
  city_list: {
    type: String,
    default: ""
  }
});

onMounted(() => {
  // initEcharts();
  // getData();
  // console.log(props.city_id_list);
});
onUnmounted(() => {
  if (myChart.isDisposed) {
    myChart.clear();
    myChart.dispose();
    myChart = null;
  }
});

const getData = async item => {
  const result = {};
  await getBadReviews({
    list_id: item
  }).then(({ data }) => {
    result.name = data[0].bad_reviews;
    result.value = data[0].sum;
    renderEcharts(result);
  });
};
const initEcharts = () => {
  myChart = echart.init(document.getElementById("Gauge"));
};
const renderEcharts = (result: any) => {
  loading.value = false
  myChart.setOption({
    backgroundColor: "#040042",
    // backgroundColor: "#000737",
    title: {
      text: "舆情风向指数",
      textStyle: {
        align: "center",
        color: "#FA0326",
        fontSize: 20
      },
      top: "5%",
      left: "center"
    },
    tooltip: {
      formatter: "{a} <br/>{b} : {c}%"
    },
    series: [
      {
        // 进度条
        name: "舆论占比",
        type: "gauge",
        splitNumber: 10,
        radius: "65%",
        min: 0,
        max: 100,
        pointer: {
          show: true,
          width: 7,
          length: "80%",
          itemStyle: {
            color: "auto"
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            width: 25,
            color: [
              [0.6, "#FD676C"],
              [0.75, "#B78218"],
              [0.9, "#28D7B6"],
              [1, "#0A7AFF"]
            ],
            borderColor: "#000",
            borderWidth: "10",
            shadowColor: "rgba(0,138,255,0.8)",
            shadowBlur: 20,
            shadowOffsetX: 4,
            shadowOffsetY: 4
          }
        },
        axisLabel: {
          show: true,
          color: "#D4FDFF",
          // 刻度显示位置
          distance: -22,
          fontSize: 12
        }, //刻度标签
        axisTick: {
          show: false
        }, //刻度样式
        splitLine: {
          show: false,
          length: "20%",
          lineStyle: {
            color: "#3699FF",
            width: 2
          }
        }, //分隔线样式
        detail: {
          show: false
        },
        title: {
          show: true,
          textStyle: {
            fontFamily: "SourceHanSansCN-Regular, SourceHanSansCN",
            fontSize: 24,
            fontWeight: "bold",
            color: "#fff",
          }
        },
        data: [
          result
        ]
      },
      {
        // 彩色部分
        type: "gauge",
        splitNumber: 10,
        radius: "55%",
        min: 0,
        max: 45,
        pointer: {
          show: false,
          width: 7,
          length: "80%",
          color: "auto"
        },
        axisLine: {
          show: true,
          lineStyle: {
            width: 25,
            color: [
              [0.3, "transparent"],
              [0.7, "transparent"],
              [1, "transparent"]
            ],
            borderColor: "transparent",
            borderWidth: "1",
            shadowColor: "rgba(0,138,255,0.8)",
            shadowBlur: 20,
            shadowOffsetX: 4,
            shadowOffsetY: 4
          }
        },
        axisLabel: {
          show: false
        }, //刻度标签。
        axisTick: {
          show: true,
          splitNumber: 5,
          lineStyle: {
            color: "#EBF3FE",
            width: 1
          }
        }, //刻度样式
        splitLine: {
          show: true,
          length: "-6%",
          lineStyle: {
            color: "#4b95f3",
            width: 2,
            shadowColor: "rgba(0,138,255,0.8)",
            shadowBlur: 20,
            shadowOffsetX: 4,
            shadowOffsetY: 4
          }
        },
        detail: {
          show: false
        },
        title: {
          show: false
        },
        data: [
          result
        ]
      },
      {
        // 背景大圆环
        name: "",
        type: "pie",
        radius: ["70%", "78%"],
        silent: true,
        startAngle: 225,
        labelLine: {
          normal: {
            show: false
          }
        },
        z: -1,
        data: [
          {
            value: 75,
            itemStyle: {
              color: "rgba(19, 55, 169,0.3)",
              borderWidth: 2,
              borderColor: "rgba(19, 55, 169,0.3)"
            }
          },
          {
            value: 25,
            itemStyle: {
              color: "transparent"
            }
          }
        ]
      },
      {
        // 背景小圆环
        name: "",
        type: "pie",
        radius: ["55%", "50%"],
        silent: true,
        startAngle: 225,
        labelLine: {
          normal: {
            show: false
          }
        },
        z: -1,
        data: [
          {
            value: 75,
            itemStyle: {
              color: "rgba(19, 55, 169,0.3)",
              borderWidth: 2,
              borderColor: "rgba(19, 55, 169,0.3)",
              shadowColor: "rgba(0,138,255,0.8)",
              shadowBlur: 20,
              shadowOffsetX: 4,
              shadowOffsetY: 4
            }
          },
          {
            value: 25,
            itemStyle: {
              color: "transparent"
            }
          }
        ]
      }
    ]
  });
};

watch(
  () => props.city_list,
  (newValue, oldValue) => {
    if (newValue) {
      console.log(newValue);

      initEcharts();
      getData(newValue);
    }
  }
);
window.addEventListener("resize", () => {
  //监听浏览器大小去改变图表尺寸
  myChart.resize();
});
</script>

<style scoped>
.GaugeView {
  height: 100%;
  width: 100%;
  /* height: 500px; */
  /* background-color: aliceblue; */
}

#Gauge {
  height: 100%;
  width: 100%;
  /* background-color: aliceblue; */
}
</style>